<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{$title}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta itemprop="name" content="{$title}">
  <meta itemprop="description" content="{$share_introduction}">
  <meta itemprop="image" content="{$share_img}">
  {if $data.status == 0}
  <link href="{$oss}web/invitate_input_record/css/mui.min.css" rel="stylesheet"/>
  <link href="{$oss}web/invitate_input_record/css/mui.picker.min.css?v=1" rel="stylesheet"/>
  {/if}
  <link rel="stylesheet" href="/static/vip/css/common.css?v=2019.11.08">
  <link href="/static/invitate_input_record/css/invitate_input_record.css?v=12.03" rel="stylesheet"/>
  <style>
    .global-location {
      width: 100%;
      height: 4rem;
      display: block;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      z-index: 9;
      box-shadow: 0 -0.4rem 0.4rem 0 rgba(221, 221, 221, 0.5);
      background: #f3f3f3;
    }

    .global-location .logo {
      width: 3rem;
      height: 3rem;
      margin: 0.5rem 0.5rem 0.5rem 3rem;
      float: left;
    }

    .global-location .title {
      font-weight: bold;
      font-size: 1.1rem;
      color: #333333;
      display: flex;
      /*margin-top: 0.25rem;*/
    }

    .global-location .desc {
      font-weight: 400;
      font-size: 1.1rem;
      color: #999999;
      display: flex;
    }

    .global-location .location .loc-btn {
      position: absolute;
      top: 0;
      right: 0;
      height: 4rem;
      font-size: 1.4rem;
      line-height: 4rem;
      padding: 0 1.1rem;
      color: #f3f3f3;
      background: #FF6C89;
      overflow: hidden;
      box-sizing: border-box;
    }

    .global-location .close {
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      width: 1.6rem;
      height: 1.6rem;
      display: block;
      background: #f3f3f3 url("/static/valentine/2021/img/叉.png") no-repeat;
      background-size: cover;
    }

    body {
      background: #fae4ed;
    }

    .container {
      padding-bottom: 6rem;
      background-color: #fae4ed;
    }

    .container-head {
      width: 100vw;
      max-width: 750px;
      height: 36.1rem;
      background-image: url("/static/synastry/img/synastry-bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      margin: 0 auto;
    }

    .container-head .head-title {
      width: 30rem;
      height: 6.1rem;
      background-image: url("/static/synastry/img/synastry-title.png");
      background-repeat: no-repeat;
      background-size: cover;
      margin: 7rem auto 0;
    }

    .container-head .head-info {
      width: calc(100% - 4rem);
      margin: 4rem auto 0;
      background-image: url("/static/synastry/img/vs-2023.png");
      background-size: 3.7rem 2.3rem;
      background-repeat: no-repeat;
      background-position: center 3rem;
      overflow: hidden;
      padding: 1rem 0;
    }

    .container-head .head-info .info {
      width: 50%;
      display: block;
      float: left;
      text-align: center;
    }

    .container-head .head-info .info .avatar {
      width: 6.4rem;
      height: 6.4rem;
      background-color: #FFEBF3;
      box-shadow: 0 0.1rem 0.4rem 0.1rem #E99DBD;
      border: 0.2rem solid #FFFFFF;
      margin: 0 auto;
      border-radius: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url("https://oss.goddessxzns.com/avatar_default_2.png")
    }

    .container-head .head-info .info .name {
      margin-top: 1.4rem;
      color: #8b4664;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 2rem;
    }

    .container-head .head-info .info .sign {
      margin-top: 0.4rem;
      font-size: 1rem;
      font-weight: 400;
      color: #b87b95;
      line-height: 1.4rem;
    }

    .content_container {
      padding-bottom: 1.6rem;
      overflow: hidden;
      width: auto;
      box-sizing: border-box;
    }

    .form .item_con .item_right_con.avatar-con {
      width: auto;
    }

    .form .item_con .item_right_con .input_con {
      color: #9fa1aa;
    }

    .user_img {
      width: 2.4rem;
      height: 2.4rem;
    }

    .btn_ok {
      background-color: #f6819f;
      color: #fff;
      font-weight: 500;
      font-size: 1.4rem;
      height: 4.4rem;
      line-height: 4.4rem;
      border-radius: 2.2rem;
    }

    .input_hint {
      text-align: center;
      color: #f6819f;
      font-weight: 400;
    }

    .shadow {
      z-index: 100;
    }

    .result_con_self {
      padding-bottom: 5rem;
      color: #f06ea6;
      font-weight: 400;
      font-size: 1.4rem;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="container-head">
    <div class="head-title"></div>
    {if $data.status == 0 || $data.status == 1 || $data.status == 3}
    <div class="head-info">
      {if $data.status == 0 || $data.status == 1}
      <div class="info">
        <div class="avatar" style="background-image: url('{$data.record.avatar}')"></div>
        <div class="name">自己</div>
        <div class="sign"></div>
      </div>
      {/if}
      <div class="info" {if condition="$data.status==3" }style="width: 100%;" {/if}>
        <div class="avatar" {if condition="$data.inviter_avatar"}style="background-image: url('{$data.inviter_avatar}')" {/if}></div>
        <div class="name">{$data.inviter_name}</div>
        <div class="sign">{$data.inviter_des}</div>
      </div>
    </div>
    {/if}
  </div>
<div id="tab-2" class="wrapper_content">
  <!--输入内容部分-->
  <div class="content_container">
    {if $data.status == 0}
    <form action="##" onsubmit="return false" class="form" method="post" id="form">
      <div class="item_con">
        <div class="title">头像</div>
        <div class="item_right_con avatar-con">
          <img class="user_img" onerror="onerror=null;src='/static/valentine/2021/img/默认头像.png'"
               src="{$data.record.avatar}">
        </div>
      </div>
      <div class="item_con">
        <div class="title">昵称</div>
        <div class="item_right_con">
          <input class="input_con" type="text" id="name" name="name" maxlength="12" value="{$data.record.name}" autocomplete="off">
          <div class="arrow"></div>
        </div>
      </div>
      <div class="item_con">
        <div class="title">性别选择</div>
        <div class="sex_con">
          <div id="sex_male" class="sex {$data.record.sex ==1 ?'sex_selected':''}" onclick="actionSex(1)">男</div>
          <div id="sex_female" class="sex sex_last {$data.record.sex ==2 ?'sex_selected':''}" onclick="actionSex(2)">女</div>
        </div>
      </div>
      <div class="item_con">
        <div class="title">出生时间</div>
        <div class="item_right_con">
          <input class="input_con" id="timeResult"
                 data-options="{&quot;value&quot;:&quot;{$data.record.year==''?'1995-01-01 00:00':$data.record.year.'-'.$data.record.month.'-'.$data.record.day.' '.$data.record.hour.':'.$data.record.minute}&quot;,&quot;beginYear&quot;:1900,&quot;endYear&quot;:2099}"
                 name="birth_time" placeholder="出生时间（公历）" type="text"
                 value="{$data.record.year==''?'':$data.record.year.'-'.$data.record.month.'-'.$data.record.day.' '.$data.record.hour.':'.$data.record.minute}"
                 readonly="true"
                 unselectable="on">
          <div class="arrow"></div>
        </div>
      </div>
      <div class="item_con">
        <div class="title">出生地点</div>
        <div class="item_right_con" id='showCityPickerBirth'>
          <input class="input_con" id='cityResultBirth' type="text" name="birth_place" placeholder=""
                 value="{$data.record.birth_country==''?'':$data.record.birth_country.($data.record.birth_country == $data.record.birth_province ? '' : $data.record.birth_province).$data.record.birth_city}"
                 readonly="true"
                 unselectable="on">
          <div class="arrow"></div>
        </div>
      </div>

      <div class="item_con item_con_without_boder_bottom">
        <div class="title">现居城市</div>
        <div class="item_right_con" id='showCityPickerNow'>
          <input class="input_con" id='cityResultNow' type="text" name="live_place" placeholder=""
                 value="{$data.record.live_country==''?'':$data.record.live_country.($data.record.live_country == $data.record.live_province ? '' : $data.record.live_province).$data.record.live_city}"
                 readonly="true" unselectable="on">
          <div class="arrow"></div>
        </div>
      </div>
      <input style="display:none;" type="text" id="is_user_have_record" name="is_user_have_record"
             value="{$data.is_user_have_record}">
      <input type="hidden" id="timestamp" name="timestamp" value="{$data.timestamp}">
      <input type="hidden" id="share_to" name="share_to" value="{$data.share_to}">
      <input type="hidden" id="unionid" name="unionid" value="{$data.unionid}">
      <input type="hidden" id="inviter_name" name="inviter_name" value="{$data.inviter_name}">
      <input type="hidden" id="avatar" name="avatar" value="{$data.record.avatar}">
      <input type="hidden" id="uid" name="uid" value="{$data.uid}">
      <input type="hidden" id="sex" name="sex" value="{$data.record.sex}">
      <input type="hidden" id="year" name="year" value="{$data.record.year}">
      <input type="hidden" id="month" name="month" value="{$data.record.month}">
      <input type="hidden" id="day" name="day" value="{$data.record.day}">
      <input type="hidden" id="hour" name="hour" value="{$data.record.hour}">
      <input type="hidden" id="minute" name="minute" value="{$data.record.minute}">
      <input type="hidden" id="birth_country" name="birth_country" value="{$data.record.birth_country}">
      <input type="hidden" id="birth_province" name="birth_province" value="{$data.record.birth_province}">
      <input type="hidden" id="birth_city" name="birth_city" value="{$data.record.birth_city}">
      <input type="hidden" id="live_country" name="live_country" value="{$data.record.live_country}">
      <input type="hidden" id="live_province" name="live_province" value="{$data.record.live_province}">
      <input type="hidden" id="live_city" name="live_city" value="{$data.record.live_city}">
      <input type="hidden" id="long_deg" name="long_deg" value="{$data.record.long_deg}">
      <input type="hidden" id="long_min" name="long_min" value="{$data.record.long_min}">
      <input type="hidden" id="ew" name="ew" value="{$data.record.ew}">
      <input type="hidden" id="lat_deg" name="lat_deg" value="{$data.record.lat_deg}">
      <input type="hidden" id="lat_min" name="lat_min" value="{$data.record.lat_min}">
      <input type="hidden" id="ns" name="ns" value="{$data.record.ns}">
    </form>
    <div class="btn_ok" onclick="checkForm()">确认提交</div>
    <div class="input_hint">你的个人信息会严格保密 仅作为合盘的依据</div>
    {elseif $data.status == 1}
    <div class="form">
      <div class="item_con">
        <div class="title">头像</div>
        <div class="item_right_con avatar-con">
          <img class="user_img" onerror="onerror=null;src='/static/valentine/2021/img/默认头像.png'"
               src="{$data.record.avatar}">
        </div>
      </div>
      <div class="item_con">
        <div class="title">昵称</div>
        <div class="item_right_con">
          {$data.record.name}
        </div>
      </div>
      <div class="item_con">
        <div class="title">性别</div>
        <div class="item_right_con">
          {if $data.record.sex ==1}男{else}女{/if}
        </div>
      </div>
      <div class="item_con">
        <div class="title">出生时间</div>
        <div class="item_right_con">
          {$data.record.year.'-'.$data.record.month.'-'.$data.record.day.' '.$data.record.hour.':'.$data.record.minute}
        </div>
      </div>
      <div class="item_con">
        <div class="title">出生地点</div>
        <div class="item_right_con">
          {$data.record.birth_country}{if
          $data.record.birth_country!==$data.record.birth_province}{$data.record.birth_province}{/if}{$data.record.birth_city}
        </div>
      </div>
      <div class="item_con">
        <div class="title">现居地</div>
        <div class="item_right_con">
          {$data.record.live_country}{if
          $data.record.live_country!==$data.record.live_province}{$data.record.live_province}{/if}{$data.record.live_city}
        </div>
      </div>
    </div>
    <a id="result-btn" class="btn_ok" href="{:url('get_with_score2023')}?id={$data.result_id??0}&token={$data.token??''}">查看合盘结果</a>
    <div class="input_hint">已成功提交，如需修改请好友再次发送邀请</div>
    {/if}
  </div>
  <div class="result_con_self" style="display: none;">
    <div>邀请更多好友进行合盘</div>
    <div>查看关系走向</div>
  </div>
  <div class="result_con_self" style="display: none;margin-top: -15rem;">
    <div>链接已失效</div>
    <div>请好友再次发送合盘邀请</div>
  </div>
</div>
<div class="global-location">
  <img src="https://oss.goddessxzns.com/zyhsapp/app_icon.png" alt="logo" class="logo">
  <div class="title">准有好事APP</div>
  <div class="desc">前往“准有好事APP”查看更多星座知识</div>
  <a href="https://applink-zyhs.goddessxzns.com?app=zyhs&target=local&link=composite%3Fneed_auth%3D1" class="location">
    <span class="loc-btn" id="openApp">打开APP</span>
    <span class="close"></span>
  </a>
</div>
</div>
<div id="shadow" class="shadow"></div>
<div id="loading">
  <img src="{$oss}web/invitate_input_record/images/loading.gif" alt="">
</div>

<script>
    var status = '{$data.status}';
    var share_title = '{$share_title}';
    var share_introduction = '{$share_introduction}';
    var share_img = '{$share_img}';
    var signPackage = JSON.parse('{:json_encode($signPackage)}');
    var record = JSON.parse('{:json_encode($data.record)}');
    var is_user_have_record = '{$data.is_user_have_record}';
</script>

{if $data.status == 0}
<script src="{$oss}web/invitate_input_record/js/mui.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/city.data-xzns.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.picker.min.js?v=1"></script>
<script src="{$oss}web/invitate_input_record/js/mui.poppicker.js"></script>
<script src="/static/invitate_input_record/js/time.place.js"></script>
{/if}
<script src="/static/jquery-3.1.1.min.js"></script>
{if $data.share_to ==1}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //微信分享 配置
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    })
    ;
    //微信分享 配置
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: share_introduction,
            link: signPackage.url,
            imgUrl: share_img,
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: signPackage.url,
            imgUrl: share_img,
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
{/if}
<!--<script src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>-->
<script>
    let browser = {
        versions: function () {
            let u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1,
                presto: u.indexOf('Presto') > -1,
                webKit: u.indexOf('AppleWebKit') > -1,
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                iPhone: u.indexOf('iPhone') > -1,
                iPad: u.indexOf('iPad') > -1,
                webApp: u.indexOf('Safari') == -1
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    if (browser.versions.mobile) {
        let ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/QQ/i) == 'qq') {
            console.log('在微信/qq中打开');
        } else {
            var container = $('.container');
            container.hide();
            $('body').append('请用微信/QQ打开链接');
        }
    } else {
        console.log('PC浏览器打开');
    }

    setResult();

    function setResult() {
        // alert('status='+status)
        const header_img = $('.header_img');
        const content_container = $('.content_container');
        const input_hint = $('.input_hint');
        const btn_ok = $('.btn_ok');
        const result_con = $('.result_container');
        const result_con_self = $('.result_con_self');

        if (0 == status) {
            header_img.show();
            content_container.show();
            input_hint.show();
            btn_ok.show();
        } else if (3 == status) {
            header_img.show();
            result_con_self.eq(0).show();
        } else if (5 == status) {
            header_img.show();
            result_con_self.eq(1).show();
        } else {
            header_img.show();
            result_con.show();
        }
    }

    //表单提交
    function checkForm() {
        let form = document.getElementById('form');
        let uid = form.uid.value;
        let avatar = form.avatar.value;
        let name = form.name.value;
        let sex = form.sex.value;
        let year = form.year.value;
        let birth_city = form.birth_city.value;
        if (!uid.trim()) {
            alert('登录信息异常!');
            return false;
        }
        if (!name.trim()) {
            alert('请填写昵称');
            return false;
        }
        if (!sex.trim()) {
            alert('请选择性别');
            return false;
        }
        if (!avatar.trim()) {
            // alert('请上传头像');
            // return false;
        }

        if (!year.trim()) {
            alert('请填写出生时间');
            return false;
        }
        if (!birth_city.trim()) {
            alert('请填写出生地点');
            return false;
        }
        console.log('avatar:', form.avatar.value);
        console.log('name:', form.name.value);
        console.log('sex:', form.sex.value);
        console.log('birth time:', form.year.value, form.month.value, form.day.value, form.hour.value, form.minute.value);
        console.log('birth_place:', form.birth_country.value, form.birth_province.value, form.birth_city.value);
        console.log('live_place:', form.live_country.value, form.live_province.value, form.live_city.value);

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/zyhsweb/synastry/saveRecord2023',
            data: $('#form').serialize(),
            beforeSend: function () {
                // loading
                document.getElementById('shadow').style.display = 'block';
                document.getElementById('loading').style.display = 'block';
            },
            success: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                if (result.code == 200) {
                    console.log(result);
                    let content_container = $('.content_container');
                    var htmlStr = '<div class="form">\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">头像</div>\n' +
                        '          <div class="item_right_con avatar-con">\n' +
                        '            <img class="user_img" onerror="onerror=null;src=\'/static/valentine/2021/img/默认头像.png\'"\n' +
                        '                 src="' + form.avatar.value + '">\n' +
                        '          </div>\n' +
                        '        </div>\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">昵称</div>\n' +
                        '          <div class="item_right_con">' + form.name.value + '</div>\n' +
                        '        </div>\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">性别</div>\n' +
                        '          <div class="item_right_con">' + (form.sex.value == 1 ? '男' : '女') + '</div>\n' +
                        '        </div>\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">出生时间</div>\n' +
                        '          <div class="item_right_con">' + form.year.value + '-' + form.month.value + '-' + form.day.value + ' ' + form.hour.value + ':' + form.minute.value + '</div>\n' +
                        '        </div>\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">出生地点</div>\n' +
                        '          <div class="item_right_con">' + form.birth_country.value + (form.birth_country.value !== form.birth_province.value ? form.birth_province.value : '') + form.birth_city.value + '</div>\n' +
                        '        </div>\n' +
                        '        <div class="item_con">\n' +
                        '          <div class="title">现居地</div>\n' +
                        '          <div class="item_right_con">' + form.live_country.value + (form.live_country.value !== form.live_province.value ? form.live_province.value : '') + form.live_city.value + '</div>\n' +
                        '        </div>\n' +
                        '      </div>\n' +
                        '      <a id="result-btn" class="btn_ok" href="{:url(\'get_with_score2023\')}?id=' + result.data.id + '&token=' + result.data.token + '">查看合盘结果</a>\n' +
                        '      <div class="input_hint">已成功提交，如需修改请好友再次发送邀请</div>';
                    content_container.html(htmlStr);
                } else {
                    alert(result.msg);
                }
            },
            error: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                alert(result.msg);
            }
        });
    }

    //选择性别事件
    function actionSex(sex) {
        let sex_male = $('#sex_male')[0];
        let sex_female = $('#sex_female')[0];
        let sex_element = $('#sex')[0];

        sex_element.value = sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    }

    $('.global-location .close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })
</script>
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
